<template>
  <div>
    <el-form class="search-form">
      <el-form-item label="产品名">
        <el-input
          v-model="searchForm.name"
          clearable
          style="width:150px"
        />
      </el-form-item>
      <el-form-item label="数据来源">
        <el-select
          v-model="searchForm.flag"
          clearable
          style="width:150px"
          placeholder="选择数据来源"
        >
          <el-option
            v-for="item in dataOriginOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产地">
        <el-input
          v-model="searchForm.originPlace"
          clearable
          style="width:150px"
        />
      </el-form-item>
    </el-form>
    <div class="operations">
      <el-button
        type="success"
        @click="load"
      >查询</el-button>
      <el-button
        type="primary"
        @click="openForm()"
      >新增</el-button>
      <el-button
        type="danger"
        :disabled="seleteList.length == 0"
        @click="deleteHandle()"
      >批量删除</el-button>
    </div>
    <el-table
      :data="dataList"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="time"
        label="日期"
      />
      <el-table-column
        prop="name"
        label="产品名"
      />
      <el-table-column
        prop="price"
        label="价格"
      />
      <el-table-column
        prop="flag"
        label="数据来源"
      > <template slot-scope="scope">
        <div
          v-for="option in dataOriginOptions"
          :key="option.value"
        >
          <el-tag
            v-if="option.value === scope.row.flag"
            :type="option.type"
          >{{ option.label }}</el-tag>
        </div>
      </template></el-table-column>
      <el-table-column
        prop="unit"
        label="单位"
      />
      <el-table-column
        prop="originPlace"
        label="产地"
      />
      <el-table-column
        prop="market"
        label="市场"
      />
      <el-table-column
        prop="specification"
        label="规格"
      />
      <el-table-column
        prop="quotationAgency"
        label="报价机构"
      />
      <el-table-column
        label="操作"
        width="200px"
      >
        <template #default="scope">
          <el-button
            type="primary"
            @click="openForm(scope.row.id)"
          >编辑</el-button>
          <el-button
            type="danger"
            @click="deleteHandle(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="total"
      :current-page="pageNum"
      style="margin-top:15px"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
    <Form
      ref="form"
      @refresh="load"
    />
  </div>
</template>

<script>
import { getProductPricePage, deleteProductPriceBatch, deleteProductPriceById } from '@/api/bigdata/productPrice'
import Form from './components/form.vue'
import { dataOriginList } from '@/utils/dict'
export default {
  components: { Form },
  data() {
    return {
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        flag: '',
        originPlace: '',
        name: ''
      },
      seleteList: [],
      dataOriginOptions: dataOriginList
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    async load() {
      const data = await getProductPricePage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        flag: this.searchForm.flag,
        name: this.searchForm.name,
        originPlace: this.searchForm.originPlace
      })
      this.dataList = data.data.records
      this.total = data.data.total
    },
    pageChange(page) {
      this.pageNum = page
      this.load()
    },
    pageSizeChange(size) {
      this.pageSize = size
      this.load()
    },
    handleSelectionChange(rows) {
      this.seleteList = rows
    },
    openForm(id) {
      this.$refs.form.init(id)
    },
    deleteHandle(id) {
      this.$confirm(
        '确定要删除吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        if (id) {
          console.log(id)
          this.delete(deleteProductPriceBatch, id)
        } else {
          let ids = ''
          this.seleteList.forEach(item => {
            ids += item.id + ','
          })
          this.delete(deleteProductPriceById, ids)
        }
      })
        .catch(() => { })
    },
    delete(operation, param) {
      operation(param).then(() => {
        this.load()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      }).catch(() => {
        this.$message({
          type: 'danger',
          message: '操作失败'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form {
  margin: 10px 0;
  padding: 0 10px;
  display: flex;
  .el-form-item {
    margin-right: 20px;
  }
}
.operations {
  padding: 0 10px;
}
</style>
